<template>
  <div style="padding: 30px;font-size: 30px;">
        <span class="time" id="time">
            今天是：<span class="date">{{ nowTime }}</span>
            <span class="hour" style="margin-left: 5px;">{{ time.hour }}</span>
            <a class="split">:</a>
            <span class="minitus">{{ time.minitus }}</span>
            <a class="split">:</a>
            <span class="seconds">{{ time.seconds }}</span>
        </span>
  </div>
</template>

<script>
export default {
  name: "DateUtils",
  props: ["s"],
  data() {
    return {
      time: {
        hour: "",
        minitus: "",
        seconds: ""
      },
      nowTime: "",
      week: [
        "星期天",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      ]
    };
  },
  mounted() {
    this.dateTime();
  },
  methods: {
    // dateTime 方法用于每秒更新时间
    dateTime() {
      // 调用 timeFormate 方法来格式化当前时间
      this.timeFormate();
      // 设置一个定时器，每1000毫秒（1秒）调用一次 dateTime 方法，实现时间的动态更新
      setTimeout(() => {
        this.dateTime();
      }, 1000);
    },

    // timeFormate 方法用于获取当前时间，并格式化时间显示
    timeFormate() {
      // 获取当前时间
      const newtime = new Date();

      // 使用 getIncrease 方法格式化小时数，确保是两位数字
      this.time.hour = this.getIncrease(newtime.getHours(), 2);
      // 使用 getIncrease 方法格式化分钟数，确保是两位数字
      this.time.minitus = this.getIncrease(newtime.getMinutes(), 2);
      // 使用 getIncrease 方法格式化秒数，确保是两位数字
      this.time.seconds = this.getIncrease(newtime.getSeconds(), 2);

      // 构建完整的日期时间字符串，包括年、月、日和星期
      this.nowTime =
          this.getIncrease(newtime.getFullYear(), 4) + "年" + // 年份，确保是4位数字
          this.getIncrease(newtime.getMonth() + 1, 2) + "月" + // 月份，确保是两位数字
          //Date 对象的 getMonth() 方法返回一个0到11的整数
          this.getIncrease(newtime.getDate(), 2) + "日 " + // 日期，确保是两位数字
          this.week[newtime.getDay()]; // 星期，从 this.week 数组中获取
    },

    // getIncrease 方法用于确保数字是特定长度的字符串，不足的部分用0填充
    getIncrease(num, digit) {
      // 初始化一个由0组成的字符串，长度等于 digit
      var increase = "";
      for (var i = 0; i < digit; i++) {
        increase += "0";
      }
      // 将数字 num 转换为字符串，并追加到由0组成的字符串后面，然后截取最后 digit 位
      return (increase + num).slice(-digit);
    }
  }
}
</script>

<style scoped>
/* 为类名为 .txt-data 的元素内的 .time 类的元素设置样式 */
.txt-data .time {
  font-size: 1rem; /* 设置字体大小为 1rem */
  margin-right: 0.5rem; /* 设置右侧外边距为 0.5rem */
}

/* 为类名为 .split 的元素设置样式 */
.split {
  animation: shark 1s step-end infinite; /* 应用名为 shark 的动画，持续时间为 1 秒，动画完成后停在结束状态，无限次播放 */
  vertical-align: center; /* 设置垂直对齐方式为居中对齐 */
  /* （原代码中的 vertical-align: center; 是无效的，应为 vertical-align: middle;） */
  margin-left: 2px; /* 设置左侧外边距为 2px */
  margin-right: 2px; /* 设置右侧外边距为 2px */
}

/* 定义名为 shark 的关键帧动画 */
@keyframes shark {
  0%, 100% { /* 在动画的开始和结束时 */
    opacity: 1; /* 元素的透明度为不透明 */
  }
  50% { /* 在动画进行到一半时 */
    opacity: 0; /* 元素的透明度为完全透明 */
  }
}
</style>
